import './backend.scss'
import React, { Component,lazy,Suspense} from 'react'
import { Link, Route, Switch} from 'react-router-dom';
const Advert = lazy(()=>import('../../components/advert/advert'));
const Hot = lazy(()=> import('../../pages/hot/hot'))

// <any,any>  将 props，state声明称 any
export default class Backend extends Component<any,any> {
    constructor(props:any) {
        super(props)
        this.state = {
            tagShow:false
        }
    }
    handleOpen = ()=>{
        this.setState({
            tagShow:true
        })
    }
    render() {
        return (
            <div className="backend">
                <div className="w960">
                    {/* 标签 */}
                    <ul className="backendTag">
                        <li className="active">全部</li>
                        <li>JavaScript</li>
                        <li>html</li>
                        <li>css</li>
                        <li>JavaScript</li>
                        <li>html</li>
                        <li>css</li>
                        <li>JavaScript</li>
                        <li>html</li>
                        <li>css</li>
                        <li className="open" onClick={this.handleOpen} style={{display:this.state.tagShow?'none':'block'}}>展开</li>
                        <li style={{display:this.state.tagShow?'block':'none'}}>css</li>
                        <li style={{display:this.state.tagShow?'block':'none'}}>JavaScript</li>
                        <li style={{display:this.state.tagShow?'block':'none'}}>html</li>
                        <li style={{display:this.state.tagShow?'block':'none'}}>css</li>
                        <li style={{display:this.state.tagShow?'block':'none'}}>JavaScript</li>
                        <li style={{display:this.state.tagShow?'block':'none'}}>html</li>
                        <li style={{display:this.state.tagShow?'block':'none'}}>css</li>
                    </ul>
                    <div className="listPar con">
                        <div className="list">
                            {/* 小标签 */}
                            <ul className="lititleTag">
                                <li className="active line"><Link to="/home/backend/1">热门</Link></li>
                                <li className="line"><Link to="/home/backend/2">最新</Link></li>
                                <li><Link to="/home/backend/3">热榜</Link></li>
                            </ul>
                            {/* 内容 */}
                            <div className="listCon">
                                <Suspense fallback={<div className="loading">加载中...</div>}>
                                <Switch>
                                   <Route path={`/home/backend/:num`}> 
                                        <Hot />
                                   </Route>
                                </Switch>
                                </Suspense>
                            </div>
                        </div>
                        {/* 右边的广告 */}
                        <Advert />
                    </div>

                </div>

            </div>
        )
    }
}